<?php

/*
 * @author Christoph Vieth <mail@christoph-vieth.de>
 */
?>
<html>
    <link type="text/css" href="flur/css/eggplant/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
    <script type="text/javascript" src="flur/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="flur/js/jquery-ui-1.8.16.custom.min.js"></script>
    <style>
        #red, #green, #blue {
            float: left;
            clear: left;
            width: 500px;
            margin: 15px;
        }
        #swatch {
            width: 120px;
            height: 100px;
            margin-top: 18px;
            margin-left: 550px;
            background-image: none;
        }
        #red .ui-slider-range { background: #ef2929; }
        #red .ui-slider-handle { border-color: #ef2929; }
        #green .ui-slider-range { background: #8ae234; }
        #green .ui-slider-handle { border-color: #8ae234; }
        #blue .ui-slider-range { background: #729fcf; }
        #blue .ui-slider-handle { border-color: #729fcf; }
        #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
        function hexFromRGB(r, g, b) {
            var hex = [
                r.toString( 16 ),
                g.toString( 16 ),
                b.toString( 16 )
            ];
            $.each( hex, function( nr, val ) {
                if ( val.length === 1 ) {
                    hex[ nr ] = "0" + val;
                }
            });
            return hex.join( "" ).toUpperCase();
        }
        
        function refreshSwatch() {
            var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" ),
            hex = hexFromRGB( red, green, blue );
            $( "#swatch" ).css( "background-color", "#" + hex );
        }
        
        function sendToController() {
            var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" ),
            hex = hexFromRGB( red, green, blue );
            var send = {"r": red, "g": green, "b": blue, "f": "0", "k": "0", "l": "0", "H": "submit"};
            $.get("http://192.168.120.30:88/", send);
            $( "#swatch" ).css( "background-color", "#" + hex );
        }
		
        $(function() {
            $( "#red, #green, #blue" ).slider({
                orientation: "horizontal",
                range: "min",
                max: 255,
                value: 127,
                slide: refreshSwatch,
                change: sendToController
            });
            $( "#red" ).slider( "value", 0 );
            $( "#green" ).slider( "value", 0 );
            $( "#blue" ).slider( "value", 0 );
        });
    </script>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
    <div id="swatch" class="ui-widget-content ui-corner-all"></div>
</html>
